<template>
  <a-select
    :value="value"
    :disabled="disabled"
    :loading="state.loading"
    :allow-clear="allowClear"
    :placeholder="placeholder"
    :mode="multiple ? 'multiple' : undefined"
    :dropdown-match-select-width="false"
    @update:value="(v) => emit('update:value', v)"
    @change="(v) => emit('change', v)"
  >
    <a-select-option
      v-for="item in state.list"
      :key="item.valueCode"
      :value="item.valueCode"
    >
      <span>{{ item.valueName }}</span>
      <span style="float: right; margin-left: 8px; color: #999">{{
        item.valueCode
      }}</span>
    </a-select-option>
  </a-select>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import { useFetchList } from "@/hook/useFetchList";
import { queryValueListByCode } from "@/api/system/value-set";
import type { QueryValueListParams } from "@/api/system/value-set/typing";

interface Props {
  /**绑定值 */
  value: string | string[];
  /**值集编码 */
  valueSetCode: string;
  /**禁用 */
  disabled?: boolean;
  /**占位文本 */
  placeholder?: string;
  /**可清除 */
  allowClear?: boolean;
  /**多选 */
  multiple?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  placeholder: "请选择值集",
  allowClear: true,
});
const emit = defineEmits(["update:value", "change"]);
const params = reactive<QueryValueListParams>({
  valueSetCode: props.valueSetCode,
});
const { state } = useFetchList(queryValueListByCode, { params });
</script>
